<script lang="ts" setup>
import {onMounted, ref} from "vue";
import {getUriTrim} from '@/api/system'
import DataForm from "@/components/data-form/index.vue";
import {service} from "@/utils";
import {Session} from "@/views/applet/ssh/interface";

const props = defineProps<{session:Session}>()

const dataFormRef = ref<InstanceType<typeof DataForm>>();
const enums = ref<{uri: Array<any>}>({uri: []});
const form = ref({
    id: null,
    sessionId: props.session.id,
    title: null,
    name: null,
    position: null,
    startup: null,
    shutdown: null,
    uriId: null
})

const loading = ref(false);
const names = ref<string[]>([]);
const onLoadProcessName = (query: string) => {
    if (query) {
        loading.value = true
        service.get("/ssh/process/name", {owner: props.session.owner, name: query}).then(({data}) => {
            loading.value = false
            names.value = data.filter((item:string) => item.toLowerCase().includes(query.toLowerCase()))
        }).finally(() => loading.value = false)
    } else {
        names.value = []
    }
}

const sessions = ref<Session[]>([])
const onLoadSession = async (query: string) => {
    loading.value = true
    service.get('/ssh/session', {owner: props.session.owner, host: query}).then(({code, data}) => {
        if (code === 200) {
            sessions.value = data;
        } else {
            sessions.value = []
        }
    }).finally(() => loading.value = false)
}

const open = (options: OpenFormConfig) => {
    getUriTrim('ssh_process').then(({code, data}) => {
        enums.value.uri.splice(0);
        if (code === 200) {
            enums.value.uri.push(...data);
            if (options.data) {
                options.data.name = options.data?.name.split(';');
            }
            dataFormRef.value?.open(options)
        }
    })
};

onMounted(() => onLoadSession(props.session.host))

defineExpose({open})
</script>

<template>
    <data-form ref="dataFormRef" :rule-field="['title', 'name', 'position']" :model="form" description="进程">
        <el-form-item v-show="false" prop="id">
            <el-input v-model="form.id"/>
        </el-form-item>
        <el-form-item label="会话" prop="sessionId">
            <el-select v-model="form.sessionId" :disabled="!!form.id" :reserve-keyword="false" :remote-method="onLoadSession" :loading="loading"
                       filterable
                       remote
                       default-first-option
                       placeholder="请选择会话">
                <el-option v-for="item in sessions" :key="item.id" :label="`${ item.username}@${ item.host }:${item.port}`" :value="item.id">
                    <span style="float: left">{{ item.host }}:{{item.port}}</span>
                    <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px; margin-left: 50px">{{ item.username }}</span>
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" placeholder="标题"/>
        </el-form-item>
        <el-form-item label="进程标识" prop="name">
            <el-select v-model="form.name" :max-collapse-tags="2" :reserve-keyword="false" :remote-method="onLoadProcessName" :loading="loading"
                       allow-create
                       collapse-tags
                       collapse-tags-tooltip
                       default-first-option
                       remote
                       filterable
                       multiple
                       placeholder="进程标识，锁定唯一进程的标识信息">
                <el-option v-for="(item, index) in names" :key="index" :label="item" :value="item"/>
            </el-select>
        </el-form-item>
        <el-form-item label="文件位置" prop="position">
            <el-input v-model="form.position" placeholder="可执行文件位置"/>
        </el-form-item>
        <el-form-item label="启动命令" prop="startup">
            <el-input v-model="form.startup" placeholder="启动进程命令,可以用&&或||拼接命令执行"/>
        </el-form-item>
        <el-form-item label="关闭命令" prop="shutdown">
            <el-input v-model="form.shutdown" placeholder="关闭进程命令,可以用&&或||拼接命令执行"/>
        </el-form-item>
        <el-form-item label="服务地址" prop="uriId">
            <el-select v-model="form.uriId" clearable>
                <el-option v-for="item in enums.uri" :key="item.id" :label="item.description" :value="item.id">
                    <span style="float: left">{{ item.description }}</span>
                    <span style="float: right">{{ item.uri }}</span>
                </el-option>
            </el-select>
        </el-form-item>
    </data-form>
</template>
